<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
			    background-color: rgb(39, 39, 39);
			}
			
			.box {
			    overflow: hidden;
			    position: relative;
			    margin: 200px auto;
			    width: 450px;
			    height: 300px;
			}
			
			.main {
			    position: absolute;
			    width: 2700px;
			    height: 300px;
			}
			
			.main img {
			    float: left;
			    width: 450px;
			    height: 300px;
			}
			
			.next,
			.last {
			    position: absolute;
			    top: 50%;
			    transform: translateY(-50%);
			    width: 30px;
			    height: 60px;
			}
			
			.next {
			    right: 0;
			    background: url(../img/右.png) no-repeat center center / 32px 32px rgba(255, 255, 255, 0.5);
			}
			
			.last {
			    left: 0;
			    background: url(../img/左.png) no-repeat center center / 32px 32px rgba(255, 255, 255, 0.5);
			}
			
			.btns {
			    position: absolute;
			    top: 85%;
			    left: 50%;
			    transform: translateX(-50%);
			    width: 110px;
			}
			
			.btns span {
			    float: left;
			    display: block;
			    margin: 4px;
			    width: 14px;
			    height: 14px;
			    background-color: #ffffff80;
			    border-radius: 50%;
			    font-size: 12px;
			    line-height: 14px;
			    text-align: center;
			    cursor: pointer;
			}
			
			.btns span:nth-child(1) {
			    background-color: deepskyblue;
			    color: #fff;
			}

		</style>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(function() {
			    // 图片的下标
			    var index = 0;
			    // 图片的宽度
			    var w = $('.main img').width();
			
			    // 点击切换下一张图片
			    $('.next').click(function() {
			        // 图片序号+1，图片向右移动一张图片的距离
			        index++;
			        // 调用 图片移动函数
			        move();
			        // 按钮颜色改变
			        btnColor();
			    });
			
			    // 点击切换上一张图片
			    $('.last').click(function() {
			        // 图片序号-1，图片向左移动一张图片的距离
			        index--;
			        // 调用 图片移动函数
			        move();
			        // 按钮颜色改变
			        btnColor();
			    });
			
			    // 点击圆点切换图片
			    $('.btns span').click(function(e) {
			        // 下标是对应的
			        index = $(this).index();
			        move();
			        btnColor();
			    })
			
			    // 图片移动函数
			    function move() {
			        // 当图片显示第一张时，点击上一张按钮，下标和坐标变为最后一张图片，
			        if (index < 0) {
			            index = 4;
			            $('.main').animate({
			                left: -w * (index + 1)
			            }, 0)
			        }
			        // 根据下标移动图片
			        $('.main').animate({
			            left: -w * index
			        });
			        // 当图片移动到最后一张时，下标变为0，坐标变为第一张图片
			        if (index === 5) {
			            index = 0;
			            $('.main').animate({
			                left: 0
			            }, 0)
			        }
			    };
			
			    // 圆点颜色随图片移动而改变
			    function btnColor() {
			        // 将点击的圆点变为蓝色
			        $('.btns span').eq(index).css({ backgroundColor: 'deepskyblue', color: '#fff' });
			        // 将其他的圆点变为白色
			        $('.btns span').eq(index).siblings().css({ backgroundColor: '#ffffff80', color: '#000' });
			    }
			
			    // 定时器，自动轮播
			    var timer = null;
			    // 每隔2s切换下一张图片
			    timer = setInterval(function() {
			        index++;
			        move();
			        btnColor();
			    }, 2000)
			
			    // 鼠标移入清除定时器
			    $('.box').mouseover(function() {
			        clearInterval(timer);
			    });
			
			    // 鼠标移出开启定时器
			    $('.box').mouseout(function() {
			        timer = setInterval(function() {
			            index++;
			            move();
			            btnColor();
			        }, 2000)
			    })
			
			});
		</script>
	</head>
	<body>
		<div class="box">
			<div class="main">
				<img src="../day8/img/1.jpg" alt="">
				<img src="../day8/img/2.jpg" alt="">
				<img src="../day8/img/3.jpg" alt="">
				<img src="../day8/img/4.jpg" alt="">
				<img src="../day8/img/5.jpg" alt="">
			</div>
			<div class="btns">
				<span>1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
			</div>
			<div class="last"></div>
			<div class="next"></div>
		</div>

	</body>
</html>
